<template>
  <div id="showTagSelect">
    <el-form-item label="显性标签" prop="tagId">
      <el-select
        v-model="tagIds"
        filterable
        multiple
        :multiple-limit="3"
        :disabled="isCanNotEdit"
        value-key="labelId"
        placeholder="- 请选择标签 -"
        @change="setTagIds"
      >
        <el-option
          class="showTag"
          v-for="item in tagList"
          :key="item.labelId"
          :label="item.labelName"
          :value="item"
        ></el-option>
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
import { getRecommentList } from '@/api/contentTags/recomment' // 接口
export default {
  name: 'showTagSelect',
  msg: '发布-显性标签下拉选择',
  props: {
    isCanNotEdit: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    channel: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      tagIds: [],
      tagList: []
    }
  },
  mounted() {
    this.getTagList()
  },
  methods: {
    /*获取标签下拉列表*/
    getTagList(c = '') {
      let obj = {
        pageNum: 1,
        pageSize: 20,
        channel: c || this.channel,
        enabled: true,
        labelProperty: 'SHOW_TAG'
      }
      getRecommentList(
        obj,
        (response) => {
          this.tagList = response.rows
        },
        (response) => {
          this.$message.warning(response.message)
        }
      )
    },
    /*选中值复位*/
    clearTagIds() {
      this.tagIds = []
    },
    /*选中值发生改变*/
    setTagIds(items) {
      this.$emit('getTagIds', items)
    },
    /*编辑时赋值*/
    setValueTagIds(items) {
      this.tagIds = [...items]
    }
  }
}
</script>

<style lang="less">
#showTagSelect {
  .el-tag.el-tag--info {
    white-space: break-spaces;
    height: auto;
  }
}
li.el-select-dropdown__item.showTag {
  max-width: 600px;
}
</style>
